<template>
  <div id="shadeChangeBox"></div>
  <div id="shadeChangeBtn">
    <el-row>
      <el-button
        type="info"
        @click="createShadeWall(this.shadeString.upToDown)"
      >
        自上而下
      </el-button>
    </el-row>
    <el-row>
      <el-button
        type="info"
        @click="createShadeWall(this.shadeString.downToUp)"
      >
        自下而上
      </el-button>
    </el-row>
    <el-row>
      <el-button type="info" @click="createShadeWall(this.shadeString.clockOn)">
        顺时针
      </el-button>
    </el-row>
    <el-row>
      <el-button
        type="info"
        @click="createShadeWall(this.shadeString.clockOff)"
      >
        逆时针
      </el-button>
    </el-row>
    <el-row>
      <el-button
        type="info"
        @click="createShadeWall(this.shadeString.upAndClock)"
      >
        合体
      </el-button>
    </el-row>
  </div>
</template>

<script>
import CONTANT from "@/lib/contant.js";
import InitCesium from "@/lib/initCesium.js";
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";

export default {
  data() {
    return {
      viewerObj: null,
      shadeWall: null,
      shadeString: {
        upToDown:
          "czm_material czm_getMaterial(czm_materialInput materialInput){\n\
               czm_material material = czm_getDefaultMaterial(materialInput);\n\
               vec2 st = materialInput.st;\n\
               vec4 colorImage = texture2D(image, vec2(fract(-(st.t + time)), st.t));\n\
               material.alpha = colorImage.a * color.a;\n\
               material.diffuse = color.rgb;\n\
               return material;\n\
           }",
        downToUp:
          "czm_material czm_getMaterial(czm_materialInput materialInput){\n\
               czm_material material = czm_getDefaultMaterial(materialInput);\n\
               vec2 st = materialInput.st;\n\
               vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));\n\
               material.alpha = colorImage.a * color.a;\n\
               material.diffuse = color.rgb;\n\
               return material;\n\
           }",
        clockOn:
          "czm_material czm_getMaterial(czm_materialInput materialInput){\n\
               czm_material material = czm_getDefaultMaterial(materialInput);\n\
               vec2 st = materialInput.st;\n\
               vec4 colorImage = texture2D(image, vec2(fract(-(st.s + time)), st.t));\n\
               material.alpha = colorImage.a * color.a;\n\
               material.diffuse = color.rgb;\n\
               return material;\n\
           }",
        clockOff:
          "czm_material czm_getMaterial(czm_materialInput materialInput){\n\
               czm_material material = czm_getDefaultMaterial(materialInput);\n\
               vec2 st = materialInput.st;\n\
               vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
               material.alpha = colorImage.a * color.a;\n\
               material.diffuse = color.rgb;\n\
               return material;\n\
           }",
        upAndClock:
          "czm_material czm_getMaterial(czm_materialInput materialInput){\n\
               czm_material material = czm_getDefaultMaterial(materialInput);\n\
               vec2 st = materialInput.st;\n\
               vec4 colorImage = texture2D(image, vec2(fract((st.t - time)-(st.s + time) ), st.t));\n\
               material.alpha = colorImage.a * color.a;\n\
               material.diffuse = color.rgb;\n\
               return material;\n\
           }",
      },
    };
  },
  mounted() {
    this.init();
  },
  unmounted() {
    this.viewerObj.destroy();
  },
  methods: {
    init() {
      this.viewerObj = InitCesium.init("shadeChangeBox");

      this.viewerObj.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          125.523256,
          42.703033,
          120000.0
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-45),
          roll: 0.0,
        },
        duration: 2,
      });

      this.createShadeWall(this.shadeString.upToDown);
    },
    createShadeWall(string) {
      function PolylineTrailLinkMaterialProperty(color, duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = new Date().getTime();
      }

      Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
          get: function () {
            return false;
          },
        },
        definitionChanged: {
          get: function () {
            return this._definitionChanged;
          },
        },
        color: Cesium.createPropertyDescriptor("color"),
      });

      PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        console.log(time);
        return "PolylineTrailLink";
      };
      PolylineTrailLinkMaterialProperty.prototype.getValue = function (
        time,
        result
      ) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(
          this._color,
          time,
          Cesium.Color.WHITE,
          result.color
        );
        result.image = Cesium.Material.PolylineTrailLinkImage;
        result.time =
          ((new Date().getTime() - this._time) % this.duration) / this.duration;
        return result;
      };

      PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
        return (
          this === other ||
          (other instanceof PolylineTrailLinkMaterialProperty &&
            Cesium.Property.equals(this._color, other._color))
        );
      };

      Cesium.PolylineTrailLinkMaterialProperty =
        PolylineTrailLinkMaterialProperty;
      Cesium.Material.PolylineTrailLinkType = "PolylineTrailLink";
      Cesium.Material.PolylineTrailLinkImage =
        CONTANT.URLPATH + "/textures/shadeRed.png";
      Cesium.Material.PolylineTrailLinkSource = string;

      Cesium.Material._materialCache.addMaterial(
        Cesium.Material.PolylineTrailLinkType,
        {
          fabric: {
            type: Cesium.Material.PolylineTrailLinkType,
            uniforms: {
              color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
              image: Cesium.Material.PolylineTrailLinkImage,
              time: 0,
            },
            source: Cesium.Material.PolylineTrailLinkSource,
          },
          translucent: function (material) {
            console.log(material);
            return true;
          },
        }
      );

      if (this.shadeWall != null) {
        this.viewerObj.entities.remove(this.shadeWall);
      }

      this.shadeWall = this.viewerObj.entities.add({
        name: "yscNoNeedEntity",
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            124.823256, 43.363033, 20000.0, 125.823256, 43.363033, 20000.0,
            125.823256, 44.363033, 20000.0, 124.823256, 44.363033, 20000.0,
            124.823256, 43.363033, 20000.0,
          ]),
          material: new Cesium.PolylineTrailLinkMaterialProperty(
            Cesium.Color.GREEN,
            2000
          ),
        },
      });
    },
  },
};
</script>

<style>
#shadeChangeBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#shadeChangeBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 15px;
  border-radius: 3px;
  background-color: #ccc;
}

#shadeChangeBtn button {
  width: 100px;
}

#shadeChangeBtn .el-row:not(:first-child) .el-button {
  margin-top: 10px;
}
</style>
